<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-dom增删改</title>
    <script>

        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }

        window.onload = function () {


            /*创建一个广州的节点，添加到#ciyt下*/

            myClick("btn01", function () {

                //创建元素节点对象
                var li = document.createElement("li");

                //创建文本节点对象
                var gzText = document.createTextNode("广州");

                //将gzText添加进city里
                li.appendChild(gzText);

                var city = document.getElementById("city");
                city.appendChild(li);
            });


            /*将“广州”节点添加到#bj前*/

            myClick("btn02", function () {
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                var bj = document.getElementById("bj");
                var city = document.getElementById("city");

                //将“广州”节点添加到#bj前
                city.insertBefore(li, bj);

            });


            /*使用“广州”节点替换bj节点*/

            myClick("btn03", function () {
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                var bj = document.getElementById("bj");
                var city = document.getElementById("city");

                //使用“广州”节点替换bj节点
                city.replaceChild(li, bj);

            });


            /*删除bj节点*/

            myClick("btn04", function () {
                var bj = document.getElementById("bj");
                var city = document.getElementById("city");

                //删除bj节点
                city.removeChild(bj);

                //另一种方式
                bj.parentNode.removeChild(bj);
            });


            /*读取#city内的HTML代码*/

            myClick("btn05", function () {
                var city = document.getElementById("city");
                alert(city.innerHTML);
            });


            /*设置#bj内的HTML代码*/
            myClick("btn06", function () {
                var bj = document.getElementById("bj");
                bj.innerHTML = "重庆";
            });

        }


    </script>
</head>

<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市？
            </p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>

        </div>
        <div id="btnlist">
            <div><button id="btn01">创建一个广州的节点，添加到#ciyt下</button></div>
            <div><button id="btn02">将“广州”节点添加到#bj前</button></div>
            <div><button id="btn03">使用“广州”节点替换bj节点</button></div>
            <div><button id="btn04">删除bj节点</button></div>
            <div><button id="btn05">读取#city内的HTML代码</button></div>
            <div><button id="btn06">设置#bj内的HTML代码</button></div>
        </div>
    </div>
</body>

</html>